<template lang="pug">
.cp-inv-outbuy-inbound
  el-dialog.inb-pop(
    :title="title",
    :visible="visible",
    @close="closeDialog",
    :close-on-click-modal="!isEdit",
    width="80%")
    el-form.inb-pop-form(:model="formData", :inline="true", :rules="rules", ref="formData")
      el-row(:gutter="12")
        el-col(:span="6")
          el-form-item(label="单据编号", prop="orderNo")
            el-tooltip(placement="top", :content="formData.orderNo", :disabled="!formData.orderNo")
              el-input(v-model="formData.orderNo", placeholder="自动生成", :disabled="true")
        el-col(:span="6")
          el-form-item(label="需求一级部门")
            el-select(v-model="formData.deptLevel1", @change="changeOneLevelDept", placeholder="请选择", :disabled="!isEdit")
              el-option(
                v-for="(item, index) in allFormDepart",
                :key="index",
                :label="item.name",
                :value="item.value")
        el-col(:span="6")
          el-form-item(label="需求二级部门")
            el-select(v-model="formData.deptLevel2", @change="changeTwoLevelDept", placeholder="请选择", :disabled="!isEdit")
              el-option(
                v-for="(item, index) in allFormSecondDepart",
                :key="index",
                :label="item.name",
                :value="item.value")
        el-col(:span="6")
          el-form-item(label="需求人")
            el-select(v-model="formData.demander", placeholder="请选择", :disabled="!isEdit")
              el-option(
                v-for="(item, index) in allFormPerson",
                :key="index",
                :label="item.name",
                :value="item.value")
      el-row(:gutter="12")
        el-col(:span="6")
          el-form-item(label="仓管员", prop="keeper")
            el-select(v-model="formData.keeper", @change="getStorehouse", :disabled="!isEdit")
              el-option(
                v-for="(item, index) in allKeeper",
                :key="index",
                :label="item.name",
                :value="item.value")
        el-col(:span="6")
          el-form-item(label="入库仓库", prop="inboundStorehouseId")
            el-select(v-model="formData.inboundStorehouseId", @change="getStorageSite", placeholder="请选择", :disabled="!isEdit")
              el-option(
                v-for="(item, index) in allStorehouse",
                :key="index",
                :label="item.name",
                :value="item.value")
        el-col(:span="6")
          el-form-item.inbound-time(label="入库时间", prop="inboundTime")
            el-date-picker(v-model="formData.inboundTime", type="datetime", disabled)
        el-col(:span="6")
          el-form-item(label="供应商")
            el-select(v-model="formData.vendor", placeholder="请选择", :disabled="!isEdit")
              el-option(
                v-for="(item, index) in allFormSupply",
                :key="index",
                :label="item.name",
                :value="item.value")
      el-row(:gutter="12")
        el-col(:span="6")
          el-form-item(label="采购订单号", prop="prevOrder")
            el-input(v-model="formData.prevOrder", @clear="clearPurOrder", :disabled="!isEdit", clearable)
              el-button(slot="append", @click="showPurOrderList") 选择订单
        el-col(:span="6")
          el-form-item(label="备注")
            el-input(v-model="formData.remark", placeholder="请输入", :disabled="!isEdit")
    h4.table-title
      span 物料明细列表
      a(v-if="!formData.skuArray || !formData.skuArray.length",
        v-show="isEdit", style="margin-left: 16px"
        @click="initSkuArray") 初始化物料
    el-table.inb-pop-table(
      :data="formData.skuArray",
      v-loading="loadingDetail",
      stripe)
      el-table-column(show-overflow-tooltip, type="index", label="序号")
      el-table-column(show-overflow-tooltip, label="物料编码")
        template(slot-scope="scope")
          div(v-if="!scope.row.canEdit") {{scope.row.sku}}
          div(v-if="scope.row.canEdit")
            el-button(type="text", @click="showSkuList(scope.$index)", v-text="scope.row.sku ? scope.row.sku : '选择物料'")
      el-table-column(label="名称")
        template(slot-scope="scope")
          el-popover(
            placement="top"
            trigger="hover")
            el-table(:data="[scope.row]")
              el-table-column(align="center", label="制造商")
                template(slot-scope="scopeChild")
                  div {{ scopeChild.row.brand | compare-list(manufacturerSelectAll) }}
              el-table-column(align="center", label="型号规格")
                template(slot-scope="scopeChild")
                  div {{scopeChild.row.specification}}
              el-table-column(align="center", label="BOM版本")
                template(slot-scope="scopeChild")
                  div {{scopeChild.row.Bom}}
              el-table-column(align="center", label="库存单位")
                template(slot-scope="scopeChild")
                  div {{scopeChild.row.unit | compare-list(skuUnitSelectAll) }}
            div(slot="reference") {{scope.row.name}}
      el-table-column(show-overflow-tooltip, label="订单数量")
        template(slot-scope="scope")
          div {{scope.row.plannedQuantity}}
      el-table-column(show-overflow-tooltip, label="已入库数量")
        template(slot-scope="scope")
          div {{scope.row.inCount}}
      el-table-column(show-overflow-tooltip, label="入库数量")
        template(slot-scope="scope")
          div(v-show="!scope.row.canEdit") {{scope.row.inboundQuantity}}
          div(v-show="scope.row.canEdit")
            el-input(v-model="scope.row.inboundQuantity")
      el-table-column(show-overflow-tooltip, label="仓位")
        template(slot-scope="scope")
          div(v-show="!scope.row.canEdit") {{scope.row.storageSite | compare-list(storageSiteSelect)}}
          el-select(v-show="scope.row.canEdit", v-model="scope.row.storageSite")
            el-option(
              v-for="(item, index) in storageSiteSelect",
              :key="index", :label="item.name",
              :value="item.value")
      el-table-column(show-overflow-tooltip, label="批号")
        template(slot-scope="scope")
          div(v-show="!scope.row.canEdit") {{scope.row.batchNo}}
          div(v-show="scope.row.canEdit")
            el-input(v-model="scope.row.batchNo")
      el-table-column(show-overflow-tooltip, label="序列号")
        template(slot-scope="scope")
          div(v-if="!scope.row.canEdit") {{scope.row.serialNo}}
          div(v-if="scope.row.canEdit && scope.row.seqNumUsing === '1'")
            el-button(type="text", @click="showInSnPopup(scope.row)", v-text="'输入序列号'")
      el-table-column(label="生产日期", min-width="120px")
        template(slot-scope="scope")
          div(v-show="!scope.row.canEdit") {{scope.row.prodDate | day-format}}
          div.table-input-time(v-show="scope.row.canEdit")
            el-date-picker(
              v-model="scope.row.prodDate",
              type="date",
              format="yyyy-MM-dd",
              value-format="timestamp",
              placeholder="选择日期")
      el-table-column(show-overflow-tooltip, label="检验单号")
        template(slot-scope="scope")
          div(v-show="!scope.row.canEdit") {{scope.row.inspectionNo}}
          div(v-show="scope.row.canEdit")
            el-input(v-model="scope.row.inspectionNo")
      el-table-column(show-overflow-tooltip, label="不合格数量")
        template(slot-scope="scope")
          div(v-show="!scope.row.canEdit") {{scope.row.defectiveQuantity}}
          div(v-show="scope.row.canEdit")
            el-input(v-model="scope.row.defectiveQuantity")
      el-table-column(label="操作", min-width="104px", fixed="right", v-if="isEdit")
        template(slot-scope="scope")
          div(v-show="!scope.row.canEdit && canOperate", :class="{enable: canOperate}")
            i.icon-act.el-icon-edit(@click="editInbItem(scope.$index, scope.row)")
            i.icon-act.el-icon-plus(@click="addInbItem(scope.$index, scope.row)")
            i.icon-act.el-icon-delete(@click="deleteInbItem(scope.$index, scope.row)")
          div(v-show="scope.row.canEdit && canOperate", class="enable")
            i.icon-act.el-icon-check(@click="saveEditItem(scope.$index, scope.row)")
            i.icon-act.el-icon-close(@click="cancelEditItem(scope.$index, scope.row)")
    .dialog-footer(slot="footer")
      el-button(type="primary", plain, @click="closeDialog") 取消
      el-button(type="primary", @click="saveInboundBill", v-if="isEdit && !onlySubmit", :disabled="saving") 保存
      el-button(type="primary", @click="submitInboundBill", v-if="isEdit", :disabled="submitting") 提交
  //- 物料列表
  materiel-list(
    :visible="showMaterielList",
    @submit="handleSelectSku",
    @close="showMaterielList = false")
  //- 采购订单列表
  order-list(
    :visible="showOrderList",
    @submit="handleSelectOrder",
    @close="showOrderList = false")
  //- 序列号
  serial-popup(
    :title="snTitle",
    :visible.sync="snVisible",
    :is-edit="snEdit",
    :parent-data="snData",
    @submit="onSnSubmit",
    @close="snVisible = false")
</template>

<script>
import { mapGetters } from 'vuex';
import ComApi from '@/api/common';
import PurApi from '@/api/purchase';
import InboundApi from '@/api/inventory/inbound';
import MaterielList from '@/components/materiel/materielList';
import OrderList from '@/components/purchase/order/OrderList';
import SerialPopup from '@/components/inventory/serialPopup';

// 使自动生成的单号为空时不提示
const validValue = (rule, value, callback) => {
  callback();
};

export default {
  name: 'outbuyInbound',
  components: {
    MaterielList,
    OrderList,
    SerialPopup
  },
  props: {
    title: String,
    visible: Boolean,
    isEdit: Boolean,
    onlySubmit: Boolean,
    parentData: Object
  },
  data() {
    return {
      loadingDetail: false,
      showMaterielList: false,
      showOrderList: false,
      // 入库单能编辑  true--能 false--不能
      canOperate: true,
      // 新建时初始数据
      formData: this.parentData,
      rules: {
        orderNo: [
          { required: true, message: '请输入单据编号', trigger: 'blur', validator: validValue }
        ],
        keeper: [
          { required: true, message: '请选择仓管员', trigger: 'change' }
        ],
        inboundStorehouseId: [
          { required: true, message: '请选择入库仓库', trigger: 'change' }
        ],
        inboundTime: [
          { type: 'date', required: true, message: '请输入入库时间', trigger: 'blur' }
        ],
        prevOrder: [
          { required: true, message: '请输入采购订单号', trigger: 'blur' }
        ]
      },
      // 序列号popup
      snTitle: '输入序列号',
      snVisible: false,
      snEdit: false,
      snData: {},
      saving: false,
      submitting: false,
      // 新建下拉框选项
      allKeeper: [],
      allStorehouse: [],
      allFormSecondDepart: [],
      allFormPerson: [],
      storageSiteSelect: []
    };
  },
  computed: {
    ...mapGetters({
      creator: 'employeeId',
      allFormDepart: 'oneDeptSelect',
      allFormSupply: 'supplySelect',
      // 物料
      cateGorySelectAll: 'skuTypeSelect',
      propertySelectAll: 'skuPropSelect',
      gradeSelectAll: 'skuLevelSelect',
      manufacturerSelectAll: 'skuManSelect',
      skuUnitSelectAll: 'unitSelect'
    })
  },
  watch: {
    parentData(newData, oldData) {
      if (newData !== oldData) {
        this.formData = newData;
        this.dataCache = newData.skuArray ? newData.skuArray.slice() : [];
        // 避免初始显示表单校验结果
        setTimeout(() => {
          this.clearValidate();
        }, 10);
        this.loadEmployeeInfo(newData);
        this.getStorehouse(newData.keeper);
        this.getStorageSite(newData.inboundStorehouseId, true);
      }
    }
  },
  created() {
    // 缓存编辑表格数据
    this.dataCache = this.parentData.skuArray ? this.parentData.skuArray.slice() : [];
    this.getStorehouse();
    this.getKeeper();
    this.loadEmployeeInfo(this.parentData);
  },
  methods: {
    // 获取 二级部门 员工列表
    loadEmployeeInfo(data) {
      // 二级部门
      ComApi.getTwoLevelDept({ oneLevelDept: data.deptLevel1 }).then((twoLevelList) => {
        this.allFormSecondDepart = twoLevelList;
      });
      // 员工列表
      ComApi.getEmployees({
        deptLevel1: data.deptLevel1,
        deptLevel2: data.deptLevel2
      }).then((personList) => {
        this.allFormPerson = personList;
      });
    },
    // 一级部门改变
    changeOneLevelDept() {
      this.allFormSecondDepart = [];
      this.$set(this.formData, 'deptLevel2', null);
      ComApi.getTwoLevelDept({ oneLevelDept: this.formData.deptLevel1 }).then((twoLevelList) => {
        this.allFormSecondDepart = twoLevelList;
      });
      this.changeTwoLevelDept();
    },
    // 二级部门改变
    changeTwoLevelDept() {
      ComApi.getEmployees({
        deptLevel1: this.formData.deptLevel1,
        deptLevel2: this.formData.deptLevel2
      }).then((personList) => {
        this.allFormPerson = personList;
        const i = personList.findIndex(item => item.value === this.formData.demander);
        if (i < 0) {
          this.$set(this.formData, 'demander', null);
        }
      });
    },
    // 根据仓管员获取仓库
    getStorehouse(val) {
      const params = {
        keeper: val || null
      };
      ComApi.getStores(params).then((list) => {
        this.allStorehouse = list;
        const i = list.findIndex(item => item.value === this.formData.inboundStorehouseId);
        if (i < 0) {
          this.$set(this.formData, 'inboundStorehouseId', null);
          this.storageSiteSelect = [];
          if (this.formData.skuArray && this.formData.skuArray.length) {
            this.formData.skuArray.forEach((row) => {
              this.$set(row, 'storageSite', null);
            });
          }
        }
      });
    },
    // 获取仓管员
    getKeeper(val) {
      const params = {
        storehouseId: val || null
      };
      ComApi.getStoreKeepers(params).then((list) => {
        this.allKeeper = list;
        const i = list.findIndex(item => item.value === this.formData.keeper);
        if (i < 0) {
          this.$set(this.formData, 'keeper', null);
        }
      });
    },
    // 根据仓库获取仓位
    getStorageSite(storehouseId, isInit) {
      // 获取仓位
      ComApi.getStorageSite({ storehouseId }).then((storageSiteSelect) => {
        this.storageSiteSelect = storageSiteSelect;
        if (this.formData.skuArray && this.formData.skuArray.length && !isInit) {
          this.formData.skuArray.forEach((row) => {
            this.$set(row, 'storageSite', null);
          });
        }
      });
      // 获取仓管员
      this.getKeeper(storehouseId);
    },
    // 清除采购订单号
    clearPurOrder() {
      this.formData.deptLevel1 = null;
      this.formData.vendor = null;
      this.formData.skuArray = [];
    },
    // 显示采购订单列表
    showPurOrderList() {
      this.showOrderList = true;
    },
    // 选择采购订单
    handleSelectOrder(data) {
      if (data) {
        this.formData.prevOrder = data.order;
        this.searchDetail();
        this.showOrderList = false;
      }
    },
    // 获取采购订单号详情
    searchDetail() {
      if (!this.isEdit) {
        return false;
      }
      PurApi.getOrderDetail({ id: this.formData.prevOrder }).then((res) => {
        if (res.status == 0) {
          // 一级部门
          this.$set(this.formData, 'deptLevel1', res.obj.depart);
          // 二级部门
          this.changeOneLevelDept();
          // 供应商
          this.$set(this.formData, 'vendor', res.obj.supply);
          if (res.obj.materiels && res.obj.materiels.length) {
            const skuArray = res.obj.materiels.map(item => (
              {
                canEdit: false,
                sku: item.incode,
                name: item.name,
                brand: item.maker,
                specification: item.size,
                Bom: item.bom,
                unit: item.buyUnit,
                plannedQuantity: item.buyNum,
                inCount: item.inCount
              }
            ));
            this.$set(this.formData, 'skuArray', skuArray);
          }
        } else {
          this.$message.error(res.comment);
        }
      }).catch((error) => {
        console.log(JSON.stringify(error));
      });
    },
    // 初始化物料
    initSkuArray() {
      this.$set(this.formData, 'skuArray', [{ canEdit: true }]);
      this.dataCache = this.formData.skuArray.slice();
    },
    // 显示物料列表
    showSkuList(index) {
      this.skuIndex = index;
      this.showMaterielList = true;
    },
    // 选择物料
    handleSelectSku(data) {
      if (data) {
        const originData = this.formData.skuArray[this.skuIndex];
        const newData = {
          ...originData,
          sku: data.skuId,
          name: data.skuName,
          brand: data.skuBrand,
          specification: data.skuSpecification,
          Bom: data.bomVersion,
          unit: data.skuUnit,
          batchNumUsing: data.batchNumUsing,
          seqNumUsing: data.seqNumUsing,
          inspectingMaterial: data.inspectingMaterial
        };
        this.formData.skuArray.splice(this.skuIndex, 1, newData);
        this.showMaterielList = false;
      }
    },
    // 输入序列号
    showInSnPopup(row) {
      if (!row.inboundQuantity) {
        this.$message.info('请输入入库数量');
        return false;
      }
      this.snRow = row;
      this.snTitle = '输入序列号';
      this.snEdit = true;
      this.snData = {
        quantity: row.inboundQuantity
      };
      this.snVisible = true;
    },
    // 保存序列号
    onSnSubmit(data) {
      if (data && this.snRow) {
        this.snRow.serialNo = data.join(',');
      }
    },
    // 移除表单的校验结果
    clearValidate() {
      if (this.$refs.formData) {
        this.$refs.formData.clearValidate();
      }
    },
    // 关闭、取消
    closeDialog() {
      this.clearValidate();
      this.$emit('close');
    },
    // 校验skuArray
    validSkuArray() {
      let canSave = true;
      if (!this.formData.skuArray || !this.formData.skuArray.length) {
        this.$message.error('物料明细列表不能为空');
        canSave = false;
        return false;
      }
      this.formData.skuArray.forEach((item) => {
        if (!item.sku) {
          this.$message.error('物料编码不能为空');
          canSave = false;
          return false;
        }
        if (!item.storageSite) {
          this.$message.error('仓位不能为空');
          canSave = false;
          return false;
        }
        if (!item.inboundQuantity && item.inboundQuantity !== 0) {
          this.$message.error('入库数量不能为空');
          canSave = false;
          return false;
        }
        if (item.canEdit) {
          this.$message.error('请先确认物料明细');
          canSave = false;
          return false;
        }
      });
      return canSave;
    },
    // 入库单保存
    saveInboundBill() {
      if (this.saving) {
        return false;
      }
      this.saving = true;
      this.$refs.formData.validate((valid) => {
        if (!valid) {
          this.$message.error('必填项不能为空');
          this.saving = false;
          return false;
        }
        if (!this.validSkuArray()) {
          this.saving = false;
          return false;
        }
        const date = new Date(this.formData.inboundTime).getTime();
        const params = {
          ...this.formData,
          creator: this.creator,
          inboundType: '0',
          inboundTime: date
        };
        InboundApi.addInvInbound(params).then((res) => {
          if (res.status === 0) {
            if (!this.formData.orderNo) {
              // 新增
              res.obj.isNew = true;
            } else {
              res.obj.isNew = false;
            }
            this.$emit('submit', res.obj);
            this.closeDialog();
            this.$message({ message: '保存成功', type: 'success' });
            this.saving = false;
          } else {
            this.$message.error(res.comment || '保存失败');
            this.saving = false;
          }
        }).catch((error) => {
          this.saving = false;
          console.log(JSON.stringify(error));
          this.$message.error('网络不给力，请稍后再试');
        });
        return true;
      });
    },
    // 入库单提交
    submitInboundBill() {
      if (this.submitting) {
        return false;
      }
      this.submitting = true;
      this.$refs.formData.validate((valid) => {
        if (!valid) {
          this.$message.error('必填项不能为空');
          this.submitting = false;
          return false;
        }
        if (!this.validSkuArray()) {
          this.submitting = false;
          return false;
        }
        const date = new Date(this.formData.inboundTime).getTime();
        const params = {
          ...this.formData,
          creator: this.creator,
          inboundType: '0',
          inboundTime: date
        };
        InboundApi.addInvInbound(params).then((res) => {
          if (res.status === 0) {
            InboundApi.submitInvInbound({ orderNo: res.obj.orderNo }).then((result) => {
              if (result.status === 0) {
                this.$message({ message: '提交成功', type: 'success' });
                res.obj.status = result.obj;
                if (!this.formData.orderNo) {
                  // 新增
                  res.obj.isNew = true;
                } else {
                  res.obj.isNew = false;
                }
                this.$emit('submit', res.obj);
                this.closeDialog();
                this.submitting = false;
              } else {
                this.$message.error(res.comment || '提交失败');
                this.submitting = false;
              }
            });
          } else {
            this.$message.error(res.comment || '提交失败');
            this.submitting = false;
          }
        }).catch((error) => {
          console.log(JSON.stringify(error));
          this.submitting = false;
          this.$message.error('网络不给力，请稍后再试');
        });
        return true;
      });
    },
    /* ****** 入库单表格操作  ****** */
    editInbItem(index) {
      if (!this.isEdit) return;
      this.dataCache[index] = Object.assign({}, this.formData.skuArray[index]);
      this.$set(this.formData.skuArray[index], 'canEdit', true);
    },
    addInbItem(index) {
      if (!this.isEdit) return;
      this.formData.skuArray.splice((index + 1), 0, { canEdit: true });
      this.dataCache.splice((index + 1), 0, { canEdit: true, fromAdd: true });
    },
    deleteInbItem(index) {
      if (!this.isEdit || this.formData.skuArray.length < 2) return;
      this.formData.skuArray.splice(index, 1);
      this.dataCache.splice(index, 1);
    },
    saveEditItem(index, row) {
      const { sku, plannedQuantity, inCount, inboundQuantity, storageSite, batchNumUsing, batchNo, seqNumUsing, serialNo, inspectingMaterial, inspectionNo, defectiveQuantity } = row;
      if (!sku) {
        this.$message.error('请选择物料');
        return false;
      }
      if (!/^\d+$/.test(inboundQuantity)) {
        this.$message.error('入库数量只能输入数字');
        return false;
      }
      const diff = Number(plannedQuantity) - Number(inCount) - Number(inboundQuantity);
      if (diff < 0) {
        this.$message.error('入库数量加上已入库数量不能大于订单数量');
        return false;
      }
      if (!storageSite) {
        this.$message.error('仓位不能为空');
        return false;
      }
      if (batchNumUsing === '1' && !batchNo && batchNo !== 0) {
        this.$message.error('批号不能为空');
        return false;
      }
      if (seqNumUsing === '1' && !serialNo && serialNo !== 0) {
        this.$message.error('序列号不能为空');
        return false;
      }
      if (inspectingMaterial === '1' && !inspectionNo && inspectionNo !== 0) {
        this.$message.error('检验单号不能为空');
        return false;
      }
      if (inspectingMaterial === '1' && !defectiveQuantity && defectiveQuantity !== 0) {
        this.$message.error('不合格数量不能为空');
        return false;
      }
      this.formData.skuArray[index].canEdit = false;
    },
    cancelEditItem(index) {
      const cache = Object.assign({}, this.dataCache[index], { canEdit: false });
      if (cache.fromAdd && this.dataCache.length > 1) {
        this.formData.skuArray.splice(index, 1);
        this.dataCache.splice(index, 1);
      } else {
        this.formData.skuArray.splice(index, 1, cache);
        this.formData.skuArray[index].canEdit = false;
      }
    }
  }
};
</script>

<style lang="sass">
@import "../../../styles/utils"
$SEARCHHEIGHT: 104px
$SELECTWIDTH: 100px
.cp-inv-outbuy-inbound
  .inb-pop
    &::-webkit-scrollbar
      display: none
    .el-dialog
      margin-top: 5vh!important
    .el-dialog__footer
      text-align: center
      padding-top: 0
      .el-button
        width: 80px
  .inb-pop-form
    .el-form-item
      width: 100%
      height: 34px
      margin-right: 0
    .el-form-item__label
      width: 104px
      text-align: right
    .el-form-item__content
      min-width: 120px
      width: calc(100% - 104px)
    .el-select, .el-date-editor.el-input, .el-autocomplete
      width: 100%
    .el-icon-search
      font-size: 16px
      font-weight: 500
      cursor: pointer
      &:hover
        color: #5D9BFB
      &.disabled
        cursor: not-allowed
        color: #c0c4cc
    .inbound-time
      .el-input--prefix .el-input__inner
        padding-left: 26px
        padding-right: 0
  .table-title
    color: #5D9BFB
    line-height: 20px
    margin: 10px 0
  .inb-pop-table
    .el-table__body-wrapper
      min-height: 304px
      max-height: 380px
      overflow: auto
    .table-input-time
      .el-date-editor.el-input, .el-date-editor.el-input__inner
        width: auto
      .el-input--prefix .el-input__inner
        padding-right: 0
    .icon-act
      font-size: 16px
      font-weight: 500
      padding: 4px
    .enable
      .icon-act
        cursor: pointer
        &:hover
          color: #5D9BFB
  .dialog-footer
    padding-top: 15px
    text-align: center
.inv-act-drop
  .icon-act
    font-size: 16px
    font-weight: 500
    cursor: pointer
    margin-left: -3px
    margin-right: 6px
</style>
